<template>
  <div>
    <div class="comShow">
      <div
        class="comment_content"
        v-for="item in commentData.data"
        :key="item.id"
      >
        <div class="user">
          <img
            :src="$axios.defaults.baseURL + item.account.defaultAvatar"
            style="width: 15px"
          />&nbsp;
          <span style="font-size: 14px; color: #666666">{{
            item.account.nickname
          }}</span
          >&nbsp;
          <i style="font-size: 14px; color: #999999">{{
            moment(item.created_at).format("YYYY-MM-DD HH:mm:ss")
          }}</i>
        </div>
        <comment-user
          :parent="item.parent"
          v-if="item.parent"
          @click="replayClick($event)"
        ></comment-user>
        <p>{{ item.content }}</p>
        <div>
          <el-image
            v-for="v in item.pics"
            :key="v.id"
            style="width: 100px; height: 100px"
            :src="$axios.defaults.baseURL + v.url"
            :preview-src-list="[$axios.defaults.baseURL + v.url]"
          >
          </el-image>
        </div>
        <div style="height: 20px">
          <el-link
            type="primary"
            style="float: right"
            @click="replay(item, $event)"
            >回复</el-link
          >
        </div>
      </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      background
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="commentData.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentData: {},
      currentPage: 1,
      start: 0,
      pageSize: 5,
    };
  },
  methods: {
    //回复操作
    replay(item, $event) {
      if (this.$store.state.user.userinfo.token) {
        this.$emit("replayClick", $event);
        // console.log(account.nickname, account.id); //需要传给其他组件
        this.$store.commit("user/setComment", {
          nickname: item.account.nickname,
          id: item.id,
        });
      } else {
        this.$store.commit("user/setURL", location.href);
        this.$router.push({ path: "/user/login" });
        this.$message.error("请先登录");
      }
    },
    // 分页数据获取
    getActicle() {
      this.$axios({
        url: "/posts/comments",
        method: "get",
        params: {
          post: this.$route.query.id,
          _limit: this.pageSize,
          _start: this.start,
        },
      }).then((res) => {
        this.commentData = res.data;
        console.log(this.commentData);
      });
    },
    //分页操作
    handleSizeChange(val) {
      this.pageSize = val;
      this.getActicle();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.start = (val - 1) * this.pageSize;
      this.getActicle();
      // console.log(`当前页: ${val}`);
    },
    replayClick($event) {
      this.$emit("replayClick", $event);
    },
  },
  mounted() {
    this.getActicle();
  },
  watch: {
    "$store.state.user.commontData"() {
      this.getActicle();
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage);
    },
    "$route.query.id"() {
      this.getActicle();
    },
  },
};
</script>
<style lang="less" scoped>
.comShow {
  border: 1px solid #dfdfdf;
  .comment_content:not(:last-child) {
    border-bottom: 1px dashed #dfdfdf;
  }
  .comment_content {
    padding: 20px;
  }
  .user {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
/deep/ .el-pagination {
  display: flex;
  justify-content: center;
  padding: 18px 2px;
}
</style>